<template>
    <view
        v-if="visibleSync"
        :class="{ 'uni-drawer--visible': showDrawer }"
        class="uni-drawer"
        @touchmove.stop.prevent="clear"
    >
        <view
            class="uni-drawer__mask"
            :class="{ 'uni-drawer__mask--visible': showDrawer && mask }"
            @tap="close('mask')"
        />
        <view
            class="uni-drawer__content"
            :class="{
                'uni-drawer--right': rightMode,
                'uni-drawer--left': !rightMode,
                'uni-drawer__content--visible': showDrawer
            }"
            :style="{ width: drawerWidth + 'px' }"
        >
            <slot />
        </view>
        <!-- #ifdef H5 -->
        <keypress @esc="close('mask')" />
        <!-- #endif -->
    </view>
</template>

<script>
// #ifdef H5
import keypress from "./keypress.js";
// #endif
/**
 * Drawer 抽屉
 * @description 抽屉侧滑菜单
 * @tutorial https://ext.dcloud.net.cn/plugin?id=26
 * @property {Boolean} mask = [true | false] 是否显示遮罩
 * @property {Boolean} maskClick = [true | false] 点击遮罩是否关闭
 * @property {Boolean} mode = [left | right] Drawer 滑出位置
 * 	@value left 从左侧滑出
 * 	@value right 从右侧侧滑出
 * @property {Number} width 抽屉的宽度 ，仅 vue 页面生效
 * @event {Function} close 组件关闭时触发事件
 */
export default {
    name: "UniDrawer",
    components: {
        // #ifdef H5
        keypress
        // #endif
    },
    props: {
        /**
         * 显示模式（左、右），只在初始化生效
         */
        mode: {
            type: String,
            default: ""
        },
        /**
         * 蒙层显示状态
         */
        mask: {
            type: Boolean,
            default: true
        },
        /**
         * 遮罩是否可点击关闭
         */
        maskClick: {
            type: Boolean,
            default: true
        },
        /**
         * 抽屉宽度
         */
        width: {
            type: Number,
            default: 220
        }
    },
    emits: ["change", "mask"],
    data() {
        return {
            visibleSync: false,
            showDrawer: false,
            rightMode: false,
            watchTimer: null,
            drawerWidth: 220
        };
    },
    created() {
        // #ifndef APP-NVUE
        this.drawerWidth = this.width;
        // #endif
        this.rightMode = this.mode === "right";
    },
    methods: {
        clear() {},
        close(type) {
            this.$emit("mask", false);
            // fixed by mehaotian 抽屉尚未完全关闭或遮罩禁止点击时不触发以下逻辑
            if ((type === "mask" && !this.maskClick) || !this.visibleSync) return;
            this._change("showDrawer", "visibleSync", false);
        },
        open() {
            // fixed by mehaotian 处理重复点击打开的事件
            if (this.visibleSync) return;
            this._change("visibleSync", "showDrawer", true);
        },
        _change(param1, param2, status) {
            this[param1] = status;
            if (this.watchTimer) {
                clearTimeout(this.watchTimer);
            }
            this.watchTimer = setTimeout(
                () => {
                    this[param2] = status;
                    this.$emit("change", status);
                },
                status ? 50 : 300
            );
        }
    }
};
</script>

<style lang="scss" scoped>
$uni-mask: rgba(
    $color: #000000,
    $alpha: 0.4
);
// 抽屉宽度
$drawer-width: 220px;

.uni-drawer {
    /* #ifndef APP-NVUE */
    display: block;
    /* #endif */
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    overflow: hidden;
    z-index: 999;
}

.uni-drawer__content {
    /* #ifndef APP-NVUE */
    display: block;
    /* #endif */
    position: absolute;
    top: 0;
    width: $drawer-width;
    bottom: 0;
    transition: transform 0.3s ease;
}

.uni-drawer--left {
    left: 0;
    /* #ifdef APP-NVUE */
    transform: translateX(-$drawer-width);
    /* #endif */
    /* #ifndef APP-NVUE */
    transform: translateX(-100%);
    /* #endif */
}

.uni-drawer--right {
    right: 0;
    /* #ifdef APP-NVUE */
    transform: translateX($drawer-width);
    /* #endif */
    /* #ifndef APP-NVUE */
    transform: translateX(100%);
    /* #endif */
}

.uni-drawer__content--visible {
    transform: translateX(0px);
}

.uni-drawer__mask {
    /* #ifndef APP-NVUE */
    display: block;
    /* #endif */
    opacity: 0;
    position: absolute;
    top: 0;
    left: 0;
    bottom: 0;
    right: 0;
    background-color: $uni-mask;
    transition: opacity 0.3s;
}

.uni-drawer__mask--visible {
    /* #ifndef APP-NVUE */
    display: block;
    /* #endif */
    opacity: 1;
}
</style>
